<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单统计图表</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
        }
        .container {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-top: 50px;
        }
        h1 {
            text-align: center;
            color: #343a40;
        }
        #main {
            margin-top: 20px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
        }
        a {
            display: block;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>订单数量柱状图</h1>
        <div id="main" style="width: 100%; height: 500px;"></div>
        <a href="{{ url_for('home.page1') }}">返回订单录入</a>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                url: '/api/order_stats',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    var orderNumbers = data.order_numbers;
                    var counts = data.counts;
                    var myChart = echarts.init(document.getElementById('main'));
                    var option = {
                        title: {
                            text: '订单数量统计',
                            left: 'center',
                            textStyle: {
                                color: '#343a40'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: orderNumbers,
                            axisLabel: {
                                interval: 0,
                                rotate: 45,
                                color: '#343a40'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#343a40'
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                color: '#343a40'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#343a40'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#dee2e6'
                                }
                            }
                        },
                        series: [{
                            name: '数量',
                            type: 'bar',
                            data: counts,
                            itemStyle: {
                                color: '#007bff'
                            }
                        }]
                    };
                    myChart.setOption(option);
                },
                error: function(xhr) {
                    console.error('获取数据失败');
                }
            });
        });
    </script>
</body>
</html>
    